<template>


    <!--添加按钮-->
    <div class="tools-div">
        <el-button type="success" size="small" @click="addMovement">上 传</el-button>
    </div>

    <!-- 上传视频 -->
    <el-dialog v-model="dialogVisible" title="上传视频" width="40%">
        <el-form label-width="120px">
            <el-form-item label="视频名称">
                <el-input v-model="videos.ming"/>
            </el-form-item>
            <el-form-item label="视频">
                <el-upload
                            class="avatar-uploader"
                            action="http://localhost:8501/admin/system/fileUpload"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :headers="headers"
                    >
                    <video v-if="videos.avatar" width="300" height="200" controls class="avatar">
                        <source :src="videos.avatar"></video>
                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit">提交</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog> 
    <!---数据表格-->
    <el-table :data="list" style="width: 100%">
        <el-table-column type="index" label="序号"/>
        <el-table-column prop="ming" label="视频名称" />
        <el-table-column prop="avatar" label="视频" #default="scope">
            <video :src="scope.row.avatar" width="300" height="200" controls class="avatar">
                <source :src="videos.avatar">
            </video>
        </el-table-column>
        <el-table-column prop="updateTime" label="跟新日期" />
        <el-table-column label="操作" align="center" width="280" #default="scope">
        </el-table-column>
    </el-table>
</template>

<script setup>
import { ref,onMounted } from 'vue'; 
import { findVideo,addVideo } from '@/api/video';
import { ElMessage,ElMessageBox } from 'element-plus';
import { useApp } from '@/pinia/modules/app'

const list = ref([])

onMounted(()=>{
    findAll()
})
const findAll = async ()=>{
    const {data} = await findVideo()
    list.value = data
}

const dialogVisible = ref(false)

const addMovement = ()=>{
    dialogVisible.value = true
}



//初始化对象
const videos = ref({
    id:'',
    ming:'',
    avatar:''
})

const headers = {
  token: useApp().authorization.token     // 从pinia中获取token，在进行文件上传的时候将token设置到请求头中
}

// 视频上传成功以后的事件处理函数
const handleAvatarSuccess = (response) => {
    videos.value.avatar = response.data
    console.log(response.data);
    console.log(videos.value.avatar);
}
const submit = async()=>{
        const {message,code} = await addVideo(videos.value)
        if(code === 200) {
            dialogVisible.value = false
            ElMessage.success('操作成功')
            findAll()
        } else {
            ElMessage.error(message)
        }
        
}

</script>

<style lang="scss" scoped>

</style>